<template>
  <div class="operate-list2 inline-block">
    <template v-if="item.disabled">
      <a-button type="text" class="operate-btn del" @click="unbindingFn(item, index)"><icon-minus-circle />解绑并删除GPS</a-button>
    </template>
    <template v-else>
      <a-button type="text" class="operate-btn del" v-if="length > 1" @click="deleteFn(index)">
        <a-space size="mini"><icon-minus-circle />删除 </a-space></a-button
      >
    </template>
    <a-button type="text" class="operate-btn new" @click="addFn" v-if="index == length - 1"
      ><a-space size="mini"><icon-plus-circle />新增</a-space></a-button
    >
  </div>
</template>

<script setup name="CarManageFormOperateList">
  import { unbindCarVehicle } from '@/api/asset/car.js'
  import { Message } from '@arco-design/web-vue'
  const props = defineProps({
    item: Object,
    index: Number,
    length: Number,
  })
  const emit = defineEmits(['add', 'delete', 'unbind'])
  const addFn = () => {
    emit('add')
  }
  const deleteFn = (index, isClear) => {
    emit('delete', index, isClear)
  }
  const unbindingFn = (item, index) => {
    unbindCarVehicle({ id: item.id }).then(() => {
      Message.warning({
        content: '解绑成功!',
        closable: true,
        duration: 5000,
      })
      // 解绑并删除车机
      if (props.length == 1) {
        deleteFn(index, true)
      } else {
        deleteFn(index)
      }
      emit('unbind')
    })
  }
</script>

<style lang="less" scoped>
  .operate-list2 {
    position: absolute;
    right: -162px;
    width: 162px;
    padding-left: 16px;
    .operate-btn {
      font-size: 14px;
      height: 32px;
      line-height: 32px;
      white-space: nowrap;
      outline: none;
      cursor: pointer;
      user-select: none;
      padding: 0 12px;
      icon {
        margin-right: 8px;
      }
      &.del {
        color: #ea0000;
      }
      &.new {
        color: #165dff;
      }
    }
  }
</style>
